<template>
  <div>
    <div class="wrapper"></div>
    <div class="wrapper-white">
      <div class="tab-list">
        <div v-for="(item, index) in tabArr" :key="index">
          <div
            class="tab-list-txt"
            id="{item.id}}"
            @click="chooseClass(index)"
            :class="{ tablisttxtN: tabIndex == item.id }"
          >
            {{ item.txt }}
          </div>
        </div>
      </div>
    </div>
    <!-- 纺纱 -->
    <div v-if="tabIndex == 0">
      <div class="spin-Wrapper">
        <div class="top-title">行业痛点</div>
        <span class="top-sub"
          >传统的棉纺织工艺设计方法工作量大，工艺变更频繁，工艺让步处理带有盲目性，难以对工艺过程进行预测和控制，影响产品的生产效率及质量的稳定性。</span
        >
        <div class="spin-img">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/92420f0582123c9989acca1c9744276a.png"
          />
        </div>
        <div class="doommview">
          <div v-for="(item, index) in doomArr" :key="index">
            <div class="doommview-back" :style="{top:item.t+'px',left:item.l +'px',width:item.w+'px',height:item.h +'px'}">
              <van-image width="100%" height="100%" fit="cover" :src="item.url" />
            </div>
          </div>
          <div class="doommview-img1 wow fadeInRight"  data-wow-duration="0.5s" data-wow-delay="0.2s">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/245b1fcc47dd364d902e90e57a8fa88b.png"
            />
          </div>
          <div class="doommview-img2 wow fadeInRight" data-wow-duration="0.5s" data-wow-delay="0.4s">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/4cf0527f64dc3254b88e0000be1ddc9e.png"
            />
          </div>
          <div class="doommview-img3 wow fadeInRight" data-wow-duration="0.5s" data-wow-delay="0.6s">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/be7b6ac87709320883fc9a7fcad1627f.png"
            />
          </div>
          <div class="doommview-img4 wow fadeInRight" data-wow-duration="0.5s" data-wow-delay="0.8s">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/d760159ce521301385c858ee6bf7a713.png"
            />
          </div>
          <div class="doommview-img5 wow fadeInRight" data-wow-duration="0.5s" data-wow-delay="1s">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/0685aa1042b136e698a11ac7a6c955ea.png"
            />
          </div>
        </div>
      </div>
      <div class="scheme">
        <div class="top-title">解决方案</div>
        <span class="top-sub scheme-sub"
          >数智纺纺纱MES系统平台，纺纱智慧物联，实时反映企业运行状态，将采集的数据形象化、直观化、具体化；最大化发挥高层管理者对运营的掌握和过程控制能力，为决策提供支撑。</span
        >
        <div class="scheme-img-l">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/4756f4353f8b38e796de9875a354762a.png"
          />
        </div>
        <div class="scheme-img-r">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/c5f59363dd9437ae8d14feaf25fcbe2e.png"
          />
        </div>
        <div class="scheme-img">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/4832f0b7cbd232eb862ba6b09bb22599.png"
          />
        </div>
      </div>
      <div class="target-wrapper">
        <div class="top-title target-title">目标实现</div>
        <div class="target-img">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/7520992e658b341aaf889b14b5dff997.png"
          />
        </div>
        <div v-for="(item, index) in targetArr" :key="index" class="wow fadeInRight" data-wow-duration="0.4s" :data-wow-delay="index/3+'s'">
          <div class="target-list">
            <div class="target-url" :style="{ marginLeft: item.left + 'px' }">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/dac8e0e475e6383e8ef32512bc9930de.png"
              />
            </div>
            <div class="target-list-sub">{{ item.txt }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 织造 v-else-if="tabIndex == 1"-->
    <div v-show="tabIndex == 1">
      <div class="weave-wrapper">
        <div class="top-title weave-title">行业痛点</div>
        <div class="weave-top-list">
          <div v-for="(item, index) in topArr[0]" :key="index">
            <div class="weave-top-white">
              <div class="weave-top-white-url">
                <van-image width="100%" height="100%" fit="cover" :src="item.url" />
              </div>
              <span class="weave-top-white-txt">{{ item.txt }}</span>
            </div>
            <div class="weave-right" v-if="index != 2" :style="{ left: index == 0 ? 120.5 + 'px' : 243 + 'px' }">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/4fa4c0b3be643715a61104bf417f79c7.png"
              />
            </div>
          </div>
        </div>
        <div class="weave-top-list weave-top-list2">
          <div v-for="(item, index) in topArr[1]" :key="index">
            <div class="weave-top-white">
              <div class="weave-top-white-url">
                <van-image width="100%" height="100%" fit="cover" :src="item.url" />
              </div>
              <span class="weave-top-white-txt weave-top-white-txt2">{{ item.txt }}</span>
            </div>
            <div class="weave-right" :style="{ left: index == 0 ? 4 + 'px' : 119 + 'px' }">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/4fa4c0b3be643715a61104bf417f79c7.png"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="weave-midd">
        <div class="top-title">解决方案</div>
        <span class="top-sub weave-sub">以看得见的执行力和实时、可视、可溯源的 特点完善生产过程管控。</span>
        <div class="weave-midd-blue">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/1b5278c2ba083bf6a2e916ae85061145.png"
          />
        </div>
        <div class="weave-midd-img weave-midd-img1">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/4cf74d9c1998337aaea1cacbafb4eb29.png"
          />
        </div>
        <div class="weave-midd-img weave-midd-img2">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/407c873707623b41adb07c4433ed2438.png"
          />
        </div>
        <div class="weave-midd-img weave-midd-img3">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/407c873707623b41adb07c4433ed2438.png"
          />
        </div>
        <div class="weave-midd-img weave-midd-img4">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/778e043be8ac342fb0f370858bca922c.png"
          />
        </div>
        <div class="weave-midd-img weave-midd-img5">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/0c75a7f9e23b389190ecad8de5ca62db.png"
          />
        </div>
        <div class="weave-midd-img weave-midd-img6">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/f410b40fc0e9363e916fa0667ac3af15.png"
          />
        </div>
        <div class="weave-midd-img weave-midd-img7">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/c01c956c1dc2385dae1f0221176cea86.png"
          />
        </div>
        <div class="weave-midd-img weave-midd-img8">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/0c75a7f9e23b389190ecad8de5ca62db.png"
          />
        </div>
        <div class="weave-midd-com">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/7cc8b32eced73a7ebf200f08009e3cfe.png"
          />
        </div>
        <div class="weave-scroll" scroll-x="true" style="width: 100%; overflow-x: auto">
          <div class="weave-scroll-white">
            <div class="weave-white-view">
              <div v-for="(item, index) in weaveArr" :key="index" class="wow fadeInRight" data-wow-duration="0.4s" :data-wow-delay="index/3+'s'">
                <div class="weave-backView">
                  <div class="weave-white-url">
                    <van-image width="100%" height="100%" :src="item.url" />
                  </div>
                  <div class="weave-white-sub">{{ item.sub }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chemical-target">
        <div class="top-title chemical-title">目标实现</div>
        <div class="chemical-target-img">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/2a7fb46222e13ef2babc010631323f55.png"
          />
        </div>
        <div v-for="(item, index) in weaveImg" :key="index">
          <div class="chemical-target-url" :style="{ marginLeft: item.left + 'px', width: item.w + 'px' }">
            <van-image width="100%" height="100%" fit="cover" :src="item.url" />
          </div>
        </div>
      </div>
    </div>
    <!-- 化纤 -->
    <div v-show="tabIndex == 2">
      <div class="chemical-Wrapper">
        <div class="top-title chemical-title">行业痛点</div>
        <div scroll-x="true" style="width: 100%; overflow-x: auto">
          <div class="chemical-scroll-white">
            <div class="chemical-white-view">
              <div v-for="(item, index) in chemicalArr" :key="index" class="wow fadeInRight" data-wow-duration="0.4s" :data-wow-delay="index/3+'s'">
                <div class="chemical-backView">
                  <div class="chemical-white-url">
                    <van-image width="100%" height="100%" :src="item.url" />
                  </div>
                  <div class="chemical-white-sub">{{ item.sub }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chemical-scheme">
        <div class="top-title">解决方案</div>
        <span class="top-sub chemical-sub"
          >化纤、纺丝行业MES系统解决方案中，重点在过程控制、生产执行、企业资源计划管理、决策支持上实现企业一体化管理。MES系统实现底层与上层的连通，
          应用服务层和业务展现层，实现系统的无缝连接与信息的充分共享。</span
        >
        <div class="chemical-scheme-blue">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/e249676b6bfe35b3b265c3ece6c34b84.png"
          />
        </div>
        <div class="chemical-scheme-round">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/d195d677cc0f351589c485888666f3e1.png"
          />
        </div>
        <div class="chemical-scheme-com">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/dd48c2deeced3c15b0cc56d2463f85a1.png"
          />
        </div>
      </div>
      <div class="chemical-target">
        <div class="top-title chemical-title">目标实现</div>
        <div class="chemical-target-img">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/2a7fb46222e13ef2babc010631323f55.png"
          />
        </div>
        <div v-for="(item, index) in chemicalImg" :key="index">
          <div class="chemical-target-url" :style="{ marginLeft: item.left + 'px', width: item.w + 'px' }">
            <van-image width="100%" height="100%" fit="cover" :src="item.url" />
          </div>
        </div>
      </div>
    </div>
    <!-- 印染 -->
    <div v-show="tabIndex == 3">
      <div class="printing-wrapper">
        <div class="top-title printing-title">行业痛点</div>
        <div class="printing-top-list">
          <div class="printing-top-left">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/dd54cbadb018395c88c174149b4b86ae.png"
            />
          </div>
          <div class="printing-top-right">
            染色、定型工段分别制定各自的生产计划，没有统一协调安排生产，导致经常出现染缸空闲、频繁洗缸、中转区半成品积压等情况
          </div>
        </div>
        <div class="printing-top-list printing-top-list2">
          <div class="printing-top-right">
            产品质量不稳定:工艺不能直接下发到机台，摊布米数工人手动录入不准确，人工干预环节太多，染色一次通过率不高，影响客户满意度
          </div>
          <div class="printing-top-left2">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/c02fbcd07cc039dd983ee4ebf1c42d76.png"
            />
          </div>
        </div>
        <div class="printing-top-list printing-top-list3">
          <div class="printing-top-left3">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/80b46e348eb13bbca3f41505ac510a43.png"
            />
          </div>
          <div class="printing-top-right">
            生产过程管控粗放:各个工序工位生产计划不精细，工人生产工艺控制、半成品运转都缺乏管控导致混乱，甚至客户坯布半成品丢失，影响生产计划执行，影响产品质量
          </div>
        </div>
        <div class="printing-top-list printing-top-list2">
          <div class="printing-top-right printing-top-right4">
            车间产线各设备孤立，没有联网，设备、生产相关人员无法随时监控车间设备的运行状态
          </div>
          <div class="printing-top-left4">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/3e68dc1cbd813160a4d76889fad3434e.png"
            />
          </div>
        </div>
        <div class="printing-top-list">
          <div class="printing-top-left5">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/fe67bb7a09de3f449ecb5de642914e20.png"
            />
          </div>
          <div class="printing-top-right printing-top-right5">
            染助剂消耗、水电气消耗量巨大，能耗数据缺失，无法找到浪费的真正原因，降低能耗没有方向
          </div>
        </div>
      </div>
      <div class="printing-midd">
        <div class="top-title">解决方案</div>
        <span class="top-sub printing-sub"
          >数智纺印染MES解决方案，实现工业自动化与信息化的深度融合，打通PMC、采购、生产环节把控生产过程中的质量问题，链接外部的软硬件接口及MES采集，输出主要的流程的数据分析，在此基础上再上精细化的产品设计计划，智能的配送系统，染缸智能排产。</span
        >
        <div class="printing-midd-img">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/0d55d5bb3a4d3c4db77d47562a137446.png"
          />
        </div>
      </div>
      <div class="printing-target">
        <div class="top-title printing-title">目标实现</div>
        <div class="printing-target-back wow fadeInRight" data-wow-duration="0.4s" data-wow-delay="0.2s">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/ee7fd4c3118a3b13b2c5a35559cb2227.png"
          />
        </div>
        <div class="printing-target-back1 wow fadeInRight" data-wow-duration="0.4s" data-wow-delay="0.4s">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/25cc6d71046534339bd30146258e7d02.png"
          />
        </div>
        <div class="printing-target-plan wow fadeInRight" data-wow-duration="0.4s" data-wow-delay="0.6s">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/25fd123ae99c3cb29a8673f4b50b2c2a.png"
          />
        </div>
        <div class="printing-target-back2 wow fadeInRight" data-wow-duration="0.4s" data-wow-delay="0.8s">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/1ef4f62699f53584b85f52bc581e589a.png"
          />
        </div>
        <div class="printing-target-list-back">
          <div v-for="(item, index) in printingArr" :key="index">
            <div class="printing-target-white" v-if="index < 4">
              <div class="printing-target-white-left">
                <van-image width="100%" height="100%" fit="cover" :src="item.url" />
              </div>
              <div class="printing-target-white-right">
                <span class="printing-target-white-sub">{{ item.txt }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="printing-target-down">
          <div class="printing-target-down-white">
            <div class="printing-target-down-img">
              <van-image width="100%" height="100%" fit="cover" :src="printingArr[4].url" />
            </div>
            <div class="printing-target-down-subB">
              <span class="printing-target-down-sub"> {{ printingArr[4].txt }}</span>
            </div>
          </div>
          <div class="printing-target-down-white">
            <div class="printing-target-down-img">
              <van-image width="100%" height="100%" fit="cover" :src="printingArr[5].url" />
            </div>
            <div class="printing-target-down-subB">
              <span class="printing-target-down-sub"> {{ printingArr[5].txt }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 无纺步 -->
    <div v-show="tabIndex == 4">
      <div class="nonwovens-wrapper">
        <div class="top-title nonwovens-title">行业痛点</div>
        <div class="nonwovens-white-top">
          <div class="nonwovens-white">
            <span class="nonwovens-white-txt"
              >无纺布生产中，通常都具有资本密集、技术含量高、用工量少、劳动力素质要求高、国际国内市场需求空间巨大等特点，依赖于专业的MES系统，实现对车间的安排与管控</span
            >
            <div class="nonwovens-white-img">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/0c6bce0f09bd3b1ead20b4299e068744.png"
              />
            </div>
          </div>
          <div class="nonwovens-white">
            <span class="nonwovens-white-txt nonwovens-white-txt2"
              >产品结构和制造工艺复杂、生产周期长、管理环节多，工艺变化和管理水平，为产品的及时生产、按时交货增加了不确定因素</span
            >
            <div class="nonwovens-white-img">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                src="https://oss.cloudcpc.com/cf6dd676982f3a3d8adbb9cd4ded1dd4.png"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="nonwovens-midd">
        <div class="top-title">解决方案</div>
        <span class="top-sub nonwovens-sub"
          >以看得见的执行力和实时、可视、可溯源的
          特点完善生产过程管控。在MES普遍功能基础上，数智纺能够结合行业特性和企业个性化需求的前提下，为无纺布企业提供完善的车间生产信息化方案。<br /><br />在整个框架当中，无纺布MES系统架构的建立，以生产订单为中心，实现无纺布生产全过程的执行管控。同时，通过与控制系统集成，在生产过程中，满足业程序、相关流程、文件及其它相关生产需求时，系统可以整合所有相关资源负责完成各种目标，包括生产目标、产量、规格要求、质量要求、品种要求等。</span
        >
        <div class="nonwovens-back1">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/4756f4353f8b38e796de9875a354762a.png"
          />
        </div>
        <div class="nonwovens-back2">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/c5f59363dd9437ae8d14feaf25fcbe2e.png"
          />
        </div>
        <div class="nonwovens-com">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/9694d17919c53f4caaa12852d3082b3d.png"
          />
        </div>
      </div>
      <div class="nonwovens-target">
        <div class="top-title nonwovens-title">目标实现</div>
        <div class="nonwovens-target-list">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/4e2514bde05d3a5899efd84600c22013.png"
          />
        </div>
        <div class="nonwovens-target-list nonwovens-target-list2">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/56524326c3573d0e92f6bebb475ad09b.png"
          />
        </div>
        <div class="nonwovens-target-list">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/2b9e99ddf6643cfb9394402c58e21b88.png"
          />
        </div>
        <div class="nonwovens-target-list nonwovens-target-list4">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/7d2c95628c9631f495a3176c52dc03b4.png"
          />
        </div>
      </div>
    </div>
    <!-- 纺织机械 -->
    <div v-show="tabIndex == 5">
      <div class="mechanical-wrapper">
        <div class="top-title mechanical-title">行业痛点</div>
        <div scroll-x="true" style="width: 100%; overflow-x: auto">
          <div class="mechanical-scroll-white">
            <div class="mechanical-white-view">
              <div  v-for="(item, index) in mechanicalArr" :key="index" class="wow fadeInRight" data-wow-duration="0.4s" :data-wow-delay="index/3+'s'">
                <div class="mechanical-backView">
                  <div class="mechanical-white-url">
                    <van-image width="100%" height="100%" :src="item.url" />
                  </div>
                  <div class="mechanical-white-sub">{{ item.txt }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mechanical-midd">
        <div class="top-title">解决方案</div>
        <span class="top-sub mechanical-sub"
          >针对纺机装备制造行业特点提供机械装备制造MES解决方案，包括：生产计划排程、工艺管理、数据采集、车间现场管理、产品跟踪/物流、质量控制与分析、设备管理、人员管理等业务模块，与ERP无缝连接，实现对车间生产数据的实时收集和响应，彻底解决车间信息不畅及难以管控的问题，大幅提升生产计划达成率，并缩短生产周期、提高产能。</span
        >
        <div class="mechanical-midd-img">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/9d343bf7b59b357385e0365b3bfdb1e0.png"
          />
        </div>
        <div class="mechanical-midd-round">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/43f263caf1b53715bc6a879b368778fc.png"
          />
        </div>
      </div>
      <div class="mechanical-target">
        <div class="top-title mechanical-title">目标实现</div>
        <div class="mechanical-down">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/48e813321c743479b80d558525574652.png"
          />
        </div>
        <div class="mechanical-list">
          <div v-for="(item, index) in mechanicalTxt" :key="index" class="wow fadeInUp">
            <div class="mechanical-list-white" :style="{background: 'url('+ item.url +')'}">
              <div class="mechanical-list-whiteB">
                <span class="mechanical-list-sub">{{ item.txt }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import { WOW } from 'wowjs'

export default {
  data() {
    return {
      tabIndex: 0,
      targetArr: [
        {
          left: 143.5,
          txt: '建立企业门户EIP'
        },
        {
          left: 173.5,
          txt: '提升生产现场工作效率'
        },
        {
          left: 189,
          txt: '实现自动配棉，自动排产'
        },
        {
          left: 203.5,
          txt: '建立棉纺工艺标准化体系'
        },
        {
          left: 189,
          txt: '提升仓储物资管理水平'
        },
        {
          left: 173.5,
          txt: '建立损耗计算体系，节能降耗'
        },
        {
          left: 143.5,
          txt: '依托数据进行科学决策'
        }
      ],
      tabArr: [
        {
          id: 0,
          txt: '纺纱'
        },
        {
          id: 1,
          txt: '织造'
        },
        {
          id: 2,
          txt: '化纤'
        },
        {
          id: 3,
          txt: '印染'
        },
        {
          id: 4,
          txt: '无纺布'
        },
        {
          id: 5,
          txt: '纺织机械'
        }
      ],
      tabIndex: 0,
      doomArr: [
        {
          t: 0,
          l: 71,
          w: 40,
          h: 15,
          url: 'https://oss.cloudcpc.com/21107073956633f6abaa63b0da787b8f.png'
        },
        {
          t: -3,
          l: 292,
          w: 30,
          h: 10,
          url: 'https://oss.cloudcpc.com/05867566d60b3a38af41466abd0c1841.png'
        },
        {
          t: 134,
          l: 210,
          w: 30,
          h: 10,
          url: 'https://oss.cloudcpc.com/05867566d60b3a38af41466abd0c1841.png'
        },
        {
          t: 84,
          l: 39,
          w: 30,
          h: 10,
          url: 'https://oss.cloudcpc.com/5ff2355280223e5bb5664460da22330f.png'
        },
        {
          t: 142,
          l: 301,
          w: 45,
          h: 15,
          url: 'https://oss.cloudcpc.com/3dc331b980c03b9ba68d5044b307ffed.png'
        }
      ],
      chemicalArr: [
        {
          url: 'https://oss.cloudcpc.com/746b9bfa8fe031dfa64a33983ee48f14.png',
          sub: '化纤、纺丝行业MES的决策具有混杂性，必须建立反映连续过程生产、加工中实时变化的过程模拟模型，并将过程模型与优化模型结合起来。'
        },
        {
          url: 'https://oss.cloudcpc.com/40f7e0401a4a3cc5ba1b0c9d070ef604.png',
          sub: '化纤、纺丝行业生产环境复杂，生产过程包各种突变和不确定性因素，不仅影响生产效率，而且存在着安全隐患。'
        },
        {
          url: 'https://oss.cloudcpc.com/d542e44a9294314f9325af22fbf6a2ba.png',
          sub: '能耗成本是生产过程中不可忽视的，所以化纤、纺丝企业信息化不仅要集成信息流和物料流，还要考虑能量流的集成。'
        }
      ],
      chemicalImg: [
        {
          left: 132.5,
          w: 176.5,
          url: 'https://oss.cloudcpc.com/6ec35ec635f33c1ca6233d4dd5941edc.png'
        },
        {
          left: 177.5,
          w: 171.5,
          url: 'https://oss.cloudcpc.com/3b8ce995ba0b395caab892b88f120811.png'
        },
        {
          left: 192.5,
          w: 166.5,
          url: 'https://oss.cloudcpc.com/ab55c48b44cc31df9213334104af66c8.png'
        },
        {
          left: 187.5,
          w: 171.5,
          url: 'https://oss.cloudcpc.com/84a514dee8ab366fbc4db63705af13d1.png'
        }
      ],
      weaveImg: [
        {
          left: 132.5,
          w: 202,
          url: 'https://oss.cloudcpc.com/42917ee964853ed18049e85f5721673f.png'
        },
        {
          left: 173,
          w: 181.5,
          url: 'https://oss.cloudcpc.com/ba0aeadaa2533ad687da14b7b755eac4.png'
        },
        {
          left: 192.5,
          w: 148,
          url: 'https://oss.cloudcpc.com/755a1eee37d63316b72c11d1d9a83965.png'
        },
        {
          left: 187.5,
          w: 161.5,
          url: 'https://oss.cloudcpc.com/52c4c60ed0c43292970cbebb3ca3d0fe.png'
        }
      ],
      weaveArr: [
        {
          url: 'https://oss.cloudcpc.com/45c972976124323da328ab2d10792598.png',
          sub: '通过织造车间现场安装的无线织机数据监测采集设备，实时采集和监控织机转速、效率、产量、停机等信息'
        },
        {
          url: 'https://oss.cloudcpc.com/3fc37ed962b837dbb83fde7b82ce38ef.png',
          sub: '通过检验车间的布匹产质量智能数据采集终端，解决布匹的产量和疵点数据采集和统计问题'
        },
        {
          url: 'https://oss.cloudcpc.com/e14c9c719dca37279ca2a6822a925943.png',
          sub: '通过条码标签打印终端和手持条码出库设备，实现原料和坯布仓库的条码化管理'
        }
      ],
      mechanicalArr: [
        {
          url: 'https://oss.cloudcpc.com/175f84f34bfe306f82e922ffdcdcaf2b.png',
          txt: '生产排程调度工作量大，效率低，计划变更导致的插单频繁等突发事件'
        },
        {
          url: 'https://oss.cloudcpc.com/031ad30f49513a378b05f8ac9317c8b7.png',
          txt: '质量管理的数据采集要求高，加工工艺复杂多样，需对质量进行全面管控'
        },
        {
          url: 'https://oss.cloudcpc.com/cc718f91260c3661bd586beafe5d392c.png',
          txt: '难以实现有效的生产管控：生产管理工作量大、工作杂、效率低、成本高'
        }
      ],
      mechanicalTxt: [
        {
          url: 'https://oss.cloudcpc.com/ed1fef5139b832299164ef2a79b1a91d.png',
          txt: '生产计划调度自动化。根据计划约束条件，对工单进行生产排序，并允许对任务进行插单，及人工调整，工单加急处理等。'
        },
        {
          url: 'https://oss.cloudcpc.com/046301d9eec33cd483126f2d32056768.png',
          txt: '定义产品工艺流程，作业指导书、装配图纸等。实际生产作业依据流程指导进行生产，防错防呆。'
        },
        {
          url: 'https://oss.cloudcpc.com/ef2de3f3cdf33e7f81ebe6004b83ea59.png',
          txt: '自动生成生产可视看板，实时监控生产进度与计划的差异，实时跟进。'
        },
        {
          url: 'https://oss.cloudcpc.com/0ec9320b53cc3d62b8abb63c4cb04056.png',
          txt: '生产派工、开工、首检、终检、材料配送等管理，员工可以根据自助终端生成派工任务，进行报工，检验等工作。'
        },
        {
          url: 'https://oss.cloudcpc.com/782f789f4a973b4bb4b239608a017406.png',
          txt: '与标准工艺流程对照，实现生产过程防错，防呆，质量管理更加简单高效。'
        },
        {
          url: 'https://oss.cloudcpc.com/d62907d56a963acba7175e384e30f917.png',
          txt: '对产品进行生产状态、质量、制程、物流等跟踪，了解在制品的生产状态。'
        }
      ],
      printingArr: [
        {
          url: 'https://oss.cloudcpc.com/75ecd46f03af3a88b91e510b3e122a84.png',
          txt: '手机点一点，就能了解染缸的运行情况'
        },
        {
          url: 'https://oss.cloudcpc.com/1cb2d4efb19b3e53a6c6af4de85d5001.png',
          txt: '智能排产系统引入灵活的多层计划模式，让繁重的车间作业计划安排变得轻松自如，更加合理'
        },
        {
          url: 'https://oss.cloudcpc.com/ee89a9e5cb0f3fee874c9471cd9792ca.png',
          txt: '系统可视化实时显示机缸工况数据，实时观测染缸运行情况透明化'
        },
        {
          url: 'https://oss.cloudcpc.com/e0e700a76b3632189556b5c28acb4e03.png',
          txt: 'AI染色专家内置工艺配方数据库，完成工艺配方的标准化输出'
        },
        {
          url: 'https://oss.cloudcpc.com/225a7c653df33ea3ac31b40edc3b39b5.png',
          txt: '实现自动配色、测色，取代染色打样师傅，对一个中等规模印染企业仅此一项就能节约30-40人的人力成本'
        },
        {
          url: 'https://oss.cloudcpc.com/14eab686ba6039a783fa57f4d356d430.png',
          txt: '透过协助分析制程与对色率关联，提升一次对色率，减少物料与资源浪费'
        }
      ],
      topArr: [
        [
          {
            url: 'https://oss.cloudcpc.com/046a390f75bc34b5a0ba9d784cba158a.png',
            txt: '劳动密集型产业，\n工人成本逐渐攀升'
          },
          {
            url: 'https://oss.cloudcpc.com/f7a91abfdd223ccf9f68d353e7693894.png',
            txt: '工作强度大，\n招工难'
          },
          {
            url: 'https://oss.cloudcpc.com/abbb15c24e3f313fad8619bf7dec02c8.png',
            txt: '机台连续作业，\n生产能耗大'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/36210e3090853f8eb2deac97f946c7e3.png',
            txt: '工序复杂，设备多，\n管理难免疏漏'
          },
          {
            url: 'https://oss.cloudcpc.com/6bd88e00017c382399bc9cbface99958.png',
            txt: '生产和管理\n效率提升难'
          }
        ]
      ]
    }
  },
  mounted() {
    const { fullPath } = this.$route
    this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })
    // WxShare({
    //   title: '虚拟仿真',
    //   desc: '实施感知、智能决策、精准执行，助力企业数字化转型，加速各行业智造升级',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })

    var swiper1 = new Swiper('.banner-swiper', {
      autoplay: true,
      loop: true,
      effect: 'fade'
      // effect: 'fade',
      // fade: {
      //   crossFade: false,
      // }
    })
  },
  methods: {
    chooseClass(e) {
      console.log(e)
      this.tabIndex = e
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index';
</style>
